/**
 * Created by zhouli on 18/1/17
 * Email li.zhou@huilianyi.com
 * 渲染 单个 人员组的限制条件
 */
import React from 'react';
import { messages } from 'share/common';
import { Select, Tag, Icon, Button, Checkbox, Input, message } from 'antd';
import 'styles/setting/person-group/rule-info.scss';

class RuleInfo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      condition: {}, // 传入的条件
      inputs: [], // 职位的input dom
      employeePositionText: '', // 职位input的内容
      showInput: false
    };
  }

  componentWillMount() {
    this.setState({ condition: this.props.condition });
  }

  componentWillReceiveProps(nextProps) {
    this.setState({ condition: nextProps.condition });
  }

  // 确认保存这个条件
  confirmHandle = () => {
    this.props.confirmHandle(this.props.index);
    this.setState({
      showInput: false,
      employeePositionText: ''
    });
  };
  // 取消编辑
  cancelHandle = () => {
    this.props.cancelHandle(this.props.index);
    this.setState({
      showInput: false,
      employeePositionText: ''
    });
  };
  // 删除条件
  deleteHandle = () => {
    this.props.deleteHandle(this.props.index);
  };
  // 改变为编辑态
  editHandle = () => {
    this.props.editHandle(this.props.index);
  };
  /**
   * 选择是否包含
   * @param value    是否包含的标志
   * @param name    标题：部门、级别、类型、职务
   * @param i    条件中项目对应的序号
   */
  logicSelectChange = (value, name, i) => {
    this.props.logicSelectChangeHandle(this.props.index, value, name, i);
  }
  /**
   * 显示弹窗添加条件中项目
   * @param name    标题：部门、级别、类型、职务
   * @param i    条件中项目对应的序号
   */
  showAddByName = (name, i) => {
    this.props.showConditionSelectorHandle(this.props.index, name, i);
  }
  /**
   * 移除一个条件项目
   * @param name     标题：部门、级别、类型、职务
   * @param value    移除的目标对象
   * @param i    条件中项目对应的序号
   */
  removeTagByName = (name, value, n) => {
    this.props.removeTagByNameHandle(this.props.index, name, value, n);
  }
  /**
   * 条件项目是否启用
   * @param val    切换后的值
   * @param i    条件中项目对应的序号
   */
  onCheckboxChange = (val, i) => {
    this.props.onCheckboxChangeHandle(this.props.index, i, val.target.checked);
  }
  /**
   * 渲染条件的项目：非编辑状态
   * @param condition    项目的项目
   * @param name   条件中项目对应的key
   */
  renderConditionDetailByName = (condition, name) => {
    let domRender = (<div />);
    const i = this._getIndex(condition.conditionDetails, name);
    const _this = this;
    if ((i === 0 || i) && condition.conditionDetails[i].conditionValues &&
      condition.conditionDetails[i].conditionValues.length &&
      condition.conditionDetails[i].conditionValues.length > 0) {
      domRender = (
        <div className="rule-info-row">
          <div className="rule-condition-checkbox">
            <Checkbox
              checked={condition.conditionDetails[i].enabled}
              disabled
            />
          </div>
          {_renderConditionTitle(name)}
          <div className="rule-condition-sub-title">
            {condition.conditionDetails[i].conditionLogic === 'I' ?
              messages('setting.key834'/* 包含*/) : messages('setting.key835'/* 不包含*/)}
          </div>
          <div className="rule-condition-content">
            {_renderConditionItem(condition.conditionDetails[i].conditionValues)}
          </div>
          <div className="clear" />
        </div>
      );
    }
    return domRender;

    // 渲染条件详情标题
    function _renderConditionTitle(name) {
      const renderObj = {
        Department: <div className="rule-condition-title">{messages('setting.key836'/* 部门:*/)}</div>,
        Company: <div className="rule-condition-title">{messages('setting.key837'/* 公司*/)}</div>,
        EmployeeRank: <div className="rule-condition-title">{messages('setting.key838'/* 人员级别:*/)}</div>,
        EmployeeDuty: <div className="rule-condition-title">{messages('setting.key839'/* 人员职务:*/)}</div>,
        EmployeeType: <div className="rule-condition-title">{messages('setting.key840'/* 人员类型:*/)}</div>,
        EmployeePosition: <div className="rule-condition-title">{messages('mcd.setting.personGroup.EmployeePositionTitle'/* 职务:*/)}</div>
      };
      return renderObj[name] ? renderObj[name] : null;
    }

    // 渲染条件详情内容
    function _renderConditionItem(values) {
      const domConditon = [];
      if (values.length > 0) {
        for (let i = 0; i < values.length - 1; i++) {
          domConditon.push(
            <div className="item" key={i}>{values[i].description} ,</div>
          );
        }
        // 最后一个不要添加逗号
        domConditon.push(
          <div className="item" key={values.length - 1}>{values[values.length - 1].description}</div>
        );
      }
      return domConditon;
    }

  }

  /**
   * 渲染条件的项目：可编辑状态
   * @param condition    项目的项目
   * @param name   条件中项目对应的key
   */
  renderEditConditionDetailByName = (condition, name) => {
    let domRender = (<div />);
    let i = this._getIndex(condition.conditionDetails, name);
    // 对于编辑状态，需要把没有条件的限制条件显示出来
    if (!(i === 0 || i)) {
      const d = {
        conditionLogic: 'I',
        conditionProperty: name,
        conditionValues: []
      };
      i = condition.conditionDetails.length;
      condition.conditionDetails[i] = d;
    }
    if (i === 0 || i) {
      domRender = (
        <div className="rule-info-row">
          <div className="rule-condition-checkbox edit-rule-condition-checkbox">
            <Checkbox
              checked={condition.conditionDetails[i].enabled}
              onChange={(val) => {
                this.onCheckboxChange(val, i);
              }}
            />
          </div>
          {this._renderConditionTitle(name)}
          <div className="rule-condition-sub-title edit-rule-condition-sub-title">
            {this._renderSelectByConditionLogic(condition.conditionDetails[i].conditionLogic, name, i)}
          </div>
          <div className="rule-condition-content edit-rule-condition-content">
            {name === 'EmployeePosition' && <div style={{ display: this.state.showInput ? 'inline-block' : 'none', float: 'left', width: '150px', marginRight: '6px' }}>
              <Input
                value={this.state.employeePositionText}
                placeholder={messages('common.please.enter') /** 请输入 */}
                onChange={e => this.onInputChange(e)}
                suffix={
                  <Icon
                    type="check"
                    style={{ cursor: 'pointer' }}
                    onClick={() => this.onInputCheck()}
                  />
                }
              />
            </div>}
            {this._renderConditionItem(condition.conditionDetails[i].conditionValues, name, i)}
          </div>
          <div className="clear" />
        </div>
      );
    }
    return domRender;

  }

  // 渲染是否包含的选择下拉单
  _renderSelectByConditionLogic(logic, name, i) {

    const Option = Select.Option;
    return (
      <Select
        defaultValue={logic} onChange={(value) => {
          this.logicSelectChange(value, name, i);
        }}>
        <Option value="I">
          {messages('setting.key834'/* 包含*/)}
        </Option>
        <Option value="E">
          {messages('setting.key835'/* 不包含*/)}
        </Option>
      </Select>
    );
  }

  // 渲染条件详情标题
  _renderConditionTitle(name) {
    const renderObj = {
      Department: <div className="rule-condition-title edit-rule-condition-title">{messages('setting.key836'/* 部门:*/)}</div>,
      Company: <div className="rule-condition-title edit-rule-condition-title">{messages('setting.key837'/* 公司*/)}</div>,
      EmployeeRank: <div className="rule-condition-title edit-rule-condition-title">{messages('setting.key838'/* 人员级别:*/)}</div>,
      EmployeeDuty: <div className="rule-condition-title edit-rule-condition-title">{messages('setting.key839'/* 人员职务:*/)}</div>,
      EmployeeType: <div className="rule-condition-title edit-rule-condition-title">{messages('setting.key840'/* 人员类型:*/)}</div>,
      EmployeePosition: <div className="rule-condition-title edit-rule-condition-title">{messages('mcd.setting.personGroup.EmployeePosition'/* 职务:*/)}</div>
    };
    return renderObj[name] ? renderObj[name] : null;
  }

  // 渲染条件详情内容
  _renderConditionItem = (values, name, n) => {
    const domConditon = [];
    for (let i = 0; i < values.length; i++) {
      domConditon.push(<Tag
        className="item" key={i} closable onClose={() => {
          this.removeTagByName(name, i, n);
        }}>{values[i].description}</Tag>);
    }
    if (name === 'Department') {
      domConditon.push(<Tag
        className="item add-tag" key={name} onClick={() => {
          this.showAddByName(name, n);
        }}><Icon type="plus" />
        {messages('setting.key841'/* 添加部门*/)}
      </Tag>);
    } else if (name === 'Company') {
      domConditon.push(<Tag
        className="item add-tag" key={name} onClick={() => {
          this.showAddByName(name, n);
        }}><Icon type="plus" /> {messages('setting.key842'/* 添加公司*/)}
      </Tag>);
    } else if (name === 'EmployeeRank') {
      domConditon.push(<Tag
        className="item add-tag" key={name} onClick={() => {
          this.showAddByName(name, n);
        }}><Icon type="plus" />
        {messages('setting.key843'/* 添加人员级别*/)}
      </Tag>);
    } else if (name === 'EmployeeDuty') {
      domConditon.push(<Tag
        className="item add-tag" key={name} onClick={() => {
          this.showAddByName(name, n);
        }}><Icon type="plus" />
        {messages('setting.key844'/* 添加人员职务*/)}
      </Tag>);
    } else if (name === 'EmployeeType') {
      domConditon.push(
        <Tag
          className="item add-tag" key={name} onClick={() => {
            this.showAddByName(name, n);
          }}><Icon type="plus" />
          {messages('setting.key845'/* 添加人员类型*/)}
        </Tag>
      );
    } else if (name === 'EmployeePosition') {
      domConditon.push(
        <Tag
          className="item add-tag"
          key={name}
          onClick={() => {
            this.addInputs(name, n);
          }}><Icon type="plus" />
          {messages('mcd.setting.personGroup.AddEmployeePosition'/* 添加职务*/)}
        </Tag>
      );
    }
    return domConditon;
  }

  addInputs = (name, n) => {
    this.showAddByName(name, n);
    const { showInput } = this.state;
    const tags = document.getElementsByClassName('item add-tag');
    for (let i = 0; i < tags.length; i++) {
      if (tags[i].innerText === messages('mcd.setting.personGroup.AddEmployeePosition'/* 添加职务*/)) {
        tags[i].style.display = 'none';
      }
    }
    if (!showInput) { // 初次点击新增按钮
      this.setState({
        showInput: true
      });
    }
  }

  /**
   * 当用户点击确认按钮触发
   */
  onInputCheck = () => {
    const { employeePositionText } = this.state;
    if (employeePositionText && employeePositionText.length > 0) {
      this.props.setInputsValue([employeePositionText]);
      this.setState({
        employeePositionText: ''
      });
    } else {
      message.error(messages('mcd.setting.personGroup.AddEmployeePositionError'));
    }

  }

  /**
   * 当用户在输入职位时触发
   * @param {Object} e
   */
  onInputChange = (e) => {
    this.setState({
      employeePositionText: e.target.value
    });
  }

  // 获取指定条件的细项的序号
  _getIndex(conditionDetails, name) {
    for (let i = 0; i < conditionDetails.length; i++) {
      if (conditionDetails[i].conditionProperty === name) {
        return i;
      }
    }
  }

  render() {
    const { condition } = this.state;

    let domRender;
    if (condition.isEditing) {
      // 正在编辑的条件
      domRender = (
        <div>
          <div className="rule-info-wrap">
            <div className="rule-info-title">
              <div className="rule-wrap-title">
                {messages('setting.key846'/* 条件*/)}
                {condition.conditionSeq} </div>
              <div className="rule-btn-wrap">
                <Button type="primary" onClick={this.confirmHandle}>
                  {messages('common.save') /* 保存*/}
                </Button>
                <Button onClick={this.cancelHandle}>
                  {messages('common.cancel') /* 取消*/}
                </Button>
              </div>
              <div className="clear" />
            </div>
            <div className="rule-info-content">
              {this.props.tenantMode && this.renderEditConditionDetailByName(condition, 'Company')}
              {this.renderEditConditionDetailByName(condition, 'Department')}
              {this.renderEditConditionDetailByName(condition, 'EmployeeRank')}
              {this.renderEditConditionDetailByName(condition, 'EmployeeDuty')}
              {this.renderEditConditionDetailByName(condition, 'EmployeeType')}
              {this.renderEditConditionDetailByName(condition, 'EmployeePosition')}
            </div>
          </div>
        </div>
      );
    } else {
      domRender = (
        <div>
          <div className="rule-info-wrap">
            <div className="rule-info-title">
              <div className="rule-wrap-title">
                {messages('setting.key846'/* 条件*/)}
                {condition.conditionSeq} </div>
              <div className="rule-btn-wrap">
                <Button type="primary" onClick={this.editHandle}>
                  {messages('common.edit') /* 编辑*/}
                </Button>
                <Button type="danger" onClick={this.deleteHandle}>
                  {messages('common.delete') /* 删除*/}
                </Button>
              </div>
              <div className="clear" />
            </div>
            <div className="rule-info-content">
              {this.props.tenantMode && this.renderConditionDetailByName(condition, 'Company')}
              {this.renderConditionDetailByName(condition, 'Department')}
              {this.renderConditionDetailByName(condition, 'EmployeeRank')}
              {this.renderConditionDetailByName(condition, 'EmployeeDuty')}
              {this.renderConditionDetailByName(condition, 'EmployeeType')}
              {this.renderConditionDetailByName(condition, 'EmployeePosition')}
            </div>
          </div>
        </div>
      );
    }
    return (
      <div className="rule-info">
        {domRender}
      </div>
    );
  }
}

RuleInfo.propTypes = {
  tenantMode: React.PropTypes.bool,
  index: React.PropTypes.number.isRequired, // 条件的序号
  condition: React.PropTypes.object.isRequired, // 单个条件对象
  confirmHandle: React.PropTypes.func.isRequired, // 点击保存
  deleteHandle: React.PropTypes.func.isRequired, // 点击删除
  editHandle: React.PropTypes.func.isRequired, // 点击编辑
  cancelHandle: React.PropTypes.func.isRequired, // 点击取消
  showConditionSelectorHandle: React.PropTypes.func.isRequired, // 点击添加条件中的项目
  logicSelectChangeHandle: React.PropTypes.func.isRequired, // 点击选择是否包含
  removeTagByNameHandle: React.PropTypes.func.isRequired, // 移除条件中的单个项目
  onCheckboxChangeHandle: React.PropTypes.func.isRequired// 启用禁用条件中的单个项目
};

RuleInfo.defaultProps = {
  tenantMode: false,
};

// 加入多语言
export default RuleInfo;

